<template> 
  <el-container>
    <!-- header -->
    <el-header>
      <div class="heade"> 
          <div class="sports-date ">
          <el-date-picker
            v-model="date"
            type="date"
            placeholder="今天"
            format="yyyy 年 MM 月 dd 日"
            value-format="yyyy-MM-dd"
            @change="handleDateChange">
          </el-date-picker>
          </div>
          <div class="sports-title">
            <h1>运动</h1> 
          </div>  
          <div class="sports-add">
            <el-button type="info"  @click.native="backList" icon="el-icon-edit" style="font-size: 13px" plain>添加记录</el-button> 
          </div> 
      </div>  
    </el-header>
   
      <el-container>
      <!-- side -->
      <el-main>
      <!-- 记录 -->
        <div class="total-border">    
          <div class="content-title"> 
            <div class="sports-item ">
              <h2>总计热量：{{sportsDataSum}}kcal</h2> 
            </div> 
          </div>
          <div class="list-item">
            <el-table
              :show-header="false"
              :data="sportsData"
              height="540"
              border
              style="width: 100%;font-size:15px">
              <el-table-column
                label="运动名称"
                show-header="false"
                style="width: 25%;font-size:15px">
                <template slot-scope="scope">
                  <el-popover trigger="hover" placement="top">
                    <p style="width: 25%;font-size:18px">运动名称: {{ scope.row.sportsInfoPO.name }}</p>
                    <p>时长: {{ scope.row.sportsRecordPO.amount }}{{scope.row.sportsInfoPO.unit}}</p>
                    <div slot="reference" class="name-wrapper">
                      <el-tag size="medium">{{ scope.row.sportsInfoPO.name }}</el-tag>
                    </div>
                  </el-popover>
                </template>
              </el-table-column>
              <el-table-column
                label="时长"
                style="width: 25%">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{ scope.row.sportsRecordPO.amount }}{{scope.row.sportsInfoPO.unit}}</span>
                </template>
              </el-table-column>
              <el-table-column 
                label="热量"
                style="width: 25%">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{ scope.row.sportsRecordPO.energy }}kcal</span>
                </template>
              </el-table-column>
              <el-table-column label="操作"  style="width: 25%">
                <template slot-scope="scope">
                  <el-button
                    size="medium"
                    @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                  <el-button
                    size="medium"
                    type="danger"
                    @click="handleDelete(scope.$index,sportsData, scope.row)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>        
        </div>  
      </el-main>
     
    </el-container>
</el-container>
</template> 
<script>
import { get, delet } from "../ajax";
import { MessageBox } from "element-ui";

export default {
  name: "Sports",
  data() {
    return {
      userId: 1,
      date: "", //日期
      sportsData: [], //运动数据
      sportsDataSum: 0 //运动总热量
    };
  },
  created() {},
  async mounted() {
    //获取当前日期
    if (this.$route.query.date) {
      this.date = this.$route.query.date;
    } else {
      var date = new Date();
      var seperator1 = "-";
      var year = date.getFullYear();
      var month = date.getMonth() + 1;
      var strDate = date.getDate();
      if (month >= 1 && month <= 9) {
        month = "0" + month;
      }
      if (strDate >= 0 && strDate <= 9) {
        strDate = "0" + strDate;
      }
      this.date = year + seperator1 + month + seperator1 + strDate;
    }

    console.log(this.date);

    const res = await get("/SmartMachine/api/Sports/records", {
      body: {
        userId: this.userId, //从智能一体机传userId
        date: this.date
      }
    });

    console.log(res);
    res.data.forEach(item => {
      this.sportsData.push(item);
      this.sportsDataSum += item.sportsRecordPO.energy;
    });
  },
  methods: {
    async handleDateChange(value) {
      console.log(value);
      console.log(this.date);
      const res = await get("/SmartMachine/api/Sports/records", {
        body: {
          userId: 1,
          date: value
        }
      });
      this.sportsData = []; //运动数据
      this.sportsDataSum = 0; //运动总热量
      res.data.forEach(item => {
        this.sportsData.push(item);
        this.sportsDataSum += item.sportsRecordPO.energy;
      });
    },
    handleEdit(index, row) {
      this.$router.push({
        path: "/updateSports",
        query: {
          recordId: row.sportsRecordPO.id
        }
      });
    },
    async handleDelete(index, rows, row) {
      this.$confirm('确定删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        //type: 'warning'
      }).then(async () => {
        //confirm
        const recordId = row.sportsRecordPO.id;
        const res = await delet("/SmartMachine/api/Sports/records", {
          body: {
            id: recordId
          }
        });
        console.log(res);
        if (res.error == 0) {
          //console.log("in delete");
          rows.splice(index, 1);
          MessageBox.alert(`删除成功`, "运动记录管理", {
            confirmButtonText: "好的"
          });
        }
      }).catch(() => {
        //cancle
       
      });
    },
    backList() {
      this.$router.push({
        path: "/sportsList",
        query: {
          userId: this.userId,
          type: event.currentTarget.id,
          date: this.date
        }
      });
    }
  }
};
</script> 
<style scoped>
.el-header {
  background-color: #b3c0d1;
  color: #333;
  margin-left: 25px;
  margin-right: 15px;
  line-height: 90px;
}
.el-main {
  background-color: #e9eef3;
  color: #333;
}
.heade {
  display: flex;
  border-radius: 15px;
}
.sports-date {
  flex: 0 0 20%;
  margin-left: -1%;
  margin-top: 10px;
  line-height: 5px;
}
.sports-add {
  flex: 0 0 30%;
  margin-top: 10px;
  margin-right: -1%;
  line-height: 5px;
}
.sports-title {
  flex: 0 0 30%;
  margin-top: 14px;
  margin-left: 20%;
  font-size: 15px;
  line-height: 2px;
}
.sports-item {
  flex: 0 0 20%;
  margin-top: 10px;
  margin-left: 10px;
  border: 1px solid #ccc;
  font-size: 10px;
  border-radius: 15px;
  line-height: 7px;
}
.el-row {
  margin-bottom: 20px;
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  margin: 10px;
  border-radius: 4px;
  min-height: 36px;
}
.content-title {
  display: flex;
  margin-left: 1px;
  margin-bottom: 20px;
  border-radius: 15px;
}
.list-item {
  margin: 8px;
}
.total-border {
  width: 100%;
  height: 600px;
  border: 1px solid #ccc;
  margin: 5px;
  margin-top: 2px;
}
</style> 

